<template>
	<view class="page">
		<template v-if="isLogin">
			<view class="body">
				<template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template>

				<template v-else>
					<view class="list-wrap">
						<template v-if="list.length > 0">
							<view class="item" v-for="(item, index) in list" :key="index">
								<view class="th">
									<text class="f-wb">{{ item.version }} 版本主要更新</text>
									<text class="time">{{ item.addtime }}</text>
								</view>
								<view class="text" v-for="(subitem, subindex) in item.remark" :key="subindex">{{ subitem }}</view>
							</view>

							<loading :loadingState="loadingState" class="m-t2"></loading>
						</template>
						<template v-else>
							<empty msg="暂无信息"></empty>
						</template>
					</view>
				</template>
			</view>
		</template>
	</view>
</template>

<script>
import loading from '@/components/loading-more.vue';
import empty from '@/components/empty.vue';
export default {
	name: 'demo',
	data() {
		return {
			isLogin: false,
			userInfo: uni.getStorageSync('userInfo'),
			loadingState: {
				default: true,
				loading: false,
				compelted: false
			},
			list: [],
			page: 1,
			total: 0
		};
	},
	async onShow() {},
	async onLoad() {
		this.isLogin = await this.$loginState('check');
		if (this.isLogin) {
			this.getLogList();
		}
	},
	onReachBottom() {
		if (this.loadingState.completed) {
			this.page = 1;
			return false;
		} else {
			if (this.list.length < this.total) {
				this.page++;
				this.getLogList();
			}
		}
	},
	methods: {
		getLogList: async function() {
			let res = await this.$api.user_api.getVersionLog({
				page: this.page
			});
			console.log(res);
			if (res.data.rcode == 1) {
				this.loadingState.default = false;
				this.loadingState.loading = true;
				this.total = res.data.data.count;
				res.data.data.list.forEach(item => {
					item.remark = item.remark.split(';');
				});
				this.list = this.list.concat(res.data.data.list);
				console.log(this.list);
				if (this.list.length == this.total) {
					this.loadingState.loading = false;
					this.loadingState.completed = true;
				}
			} else {
				this.loadingState.default = false;
			}
		}
	},
	computed: {},
	components: {
		loading,
		empty
	}
};
</script>

<style lang="less">
.list-wrap {
	.item {
		padding: 25rpx 0;
		margin: 0 0 0 40rpx;
		border-bottom: 1rpx solid #ddd;
		font-size: 28rpx;
		.th {
			display: flex;
			justify-content: space-between;
			.time {
				margin-right: 20rpx;
				color: #999;
			}
		}
		.text {
			margin-top: 15rpx;
			color: #666;
		}
	}
}
</style>
